<template>
  <div class="community flex_between">
    <transition name="left" appear>
      <div class="left">
        <ItemBox :title="gradeList" style="height: 99.8%" class="left-top" @gradeClick="gradeClick" :type="gradeType"
          :backgroundImage="require('@/assets/images/licang/kuang/k9.png')">
          <span class="date" slot="select" @click="gradeType='select'" v-if="grade==5"
            :style="{color:gradeType=='select'?'#00D2FF':''}">居民筛选</span>
          <!-- <div v-if="gradeType=='grade'" slot="content"
            style="color: #ffffff;background-color: #000000;font-size: 19px;z-index: 1000;">
            等级测试

            <span v-for="(item,index) in gradeList" @click="gradeClick(item)" :key="index">{{item.name}}-</span>
          </div>

            -->

          <SubContentBox v-if="(grade==1||grade==2||grade==3)&&gradeType=='grade'" slot="content" title="社区居民分析"
            style="height: 61%">
            <div slot="content">
              <div class="flex left-top1">
                <EchartsPie class="pie-echarts" :titleSize="16" :label="item.title" :data="item.data"
                  :radius="['80%', '98%']" v-for="(item,index) in leftTop1" :key="index"></EchartsPie>
              </div>
              <div class="clearfix">
                <div class="left-top2-item fl" v-for="(item, index) in residents" :key="item.name">
                  <span class="flipper-span margin-right">{{ item.name }}</span>
                  <Flipper :val="item.value"></Flipper>
                  <span class="flipper-span">个</span>
                  <div class="up" v-if="index % 3 == 0"></div>
                  <div class="down" v-else></div>
                  <span class="flipper-number">{{ item.rate }}</span>
                </div>
              </div>
              <div style="width: 98%; height: 116px; margin-top: 10px">
                <h4 style="margin-left: 10px">年龄性别对比分析</h4>
                <StackBar :data="seriesData" />
              </div>
              <div style="width: 100%; height: 149px; margin-top: 30px">
                <h4 style="margin-left: 10px">职业收入对比分析</h4>
                <EchartsMoreLineAlter splitNumber="3" yUnit="元" :data="occupationIncome" :color="[
                  'rgba(217, 117, 89,',
                  'rgba(228, 196, 119,',
                  'rgba(2, 246, 247,',
                  'rgba(48, 137, 233,',
                ]"></EchartsMoreLineAlter>
              </div>
              <div style="width: 100%; height: 149px; margin-top: 20px">
                <h4 style="margin-left: 10px">地区来源地分析</h4>
                <EchartsMoreLineAlter splitNumber="3" yUnit="人" :data="origin" :color="[
                  'rgba(217, 117, 89,',
                  'rgba(228, 196, 119,',
                  'rgba(2, 246, 247,',
                  'rgba(48, 137, 233,',
                ]"></EchartsMoreLineAlter>
              </div>
            </div>
          </SubContentBox>
          <SubContentBox v-if="(grade==1||grade==2||grade==3)&&gradeType=='grade'" slot="content" title="设施监测"
            style="height: 27%" class="left-top3">
            <div slot="content">
              <div class="clearfix">
                <div class="left-top2-item fl" v-for="(item, index) in facilities" :key="item.name">
                  <span class="flipper-span margin-right" style="width: 4em">{{
                    item.name
                    }}</span>
                  <Flipper :val="item.value"></Flipper>
                  <span class="flipper-span">个</span>
                  <div class="up" v-if="index % 3 == 0"></div>
                  <div class="down" v-else></div>
                  <span class="flipper-number">{{ item.rate }}</span>
                </div>
              </div>
              <div style="width: 94%; height: 130px; margin: 0 auto">
                <HBar style="margin-top: 3px;" :data="HBarData" />
              </div>
            </div>
          </SubContentBox>
          <SubContentBox v-if="(grade==1||grade==2||grade==3)&&gradeType=='grade'" slot="content" title="设备检测"
            style="height: 20%" class="left-top3">
            <div slot="content">
              <div class="clearfix">
                <div class="left-top2-item fl" v-for="(item, index) in devices" :key="item.name">
                  <span class="flipper-span margin-right" style="width: 4em">{{
                    item.name
                    }}</span>
                  <Flipper :val="item.value"></Flipper>
                  <span class="flipper-span">个</span>
                  <div class="up" v-if="index % 3 == 0"></div>
                  <div class="down" v-else></div>
                  <span class="flipper-number">{{ item.rate }}</span>
                </div>
              </div>

            </div>
          </SubContentBox>
          <SubContentBox v-if="grade==4&&gradeType=='grade'" slot="content" title="服务设施可用性监控" style="height: 16%">
            <div class="service-monitoring" slot="content">
              <div v-for="(item,index) in serviceMonitoring" :key="index" class="flex_center_direction2">
                <EchartsPercentage barWidth="10" :itemStyleColor="item.color" :label="item.value+item.unit" unit="%"
                  class="service-monitoring-echarts" :data="item.rate">
                </EchartsPercentage>
                <span style="color:#ffffff">{{item.name}}</span>
              </div>
            </div>
          </SubContentBox>
          <SubContentBox v-if="grade==4&&gradeType=='grade'" slot="content" title="居民生活监控" style="height: 21%">
            <EchartsMoreLineAlter splitNumber="3" :extraLegend="{right:'center',top:0,orient:'horizontal'}"
              :data="residentLife" slot="content" :color="[
          'rgba(217, 117, 89,',
          'rgba(228, 196, 119,',
          'rgba(2, 246, 247,',
          'rgba(48, 137, 233,',
        ]" gridRight="3%" areaStyleOpcity="0"></EchartsMoreLineAlter>
          </SubContentBox>
          <SubContentBox v-if="grade==4&&gradeType=='grade'" slot="content" title="社区流量监控" style="height: 21%">
            <EchartsMoreLineAlter :extraLegend="{right:'center',top:0,orient:'horizontal'}" splitNumber="3"
              :data="communityTraffic" slot="content" :color="[
          'rgba(217, 117, 89,',
          'rgba(2, 246, 247,',
          'rgba(48, 137, 233,',
        ]" gridRight="3%" areaStyleOpcity="0"></EchartsMoreLineAlter>
          </SubContentBox>
          <SubContentBox v-if="grade==4&&gradeType=='grade'" slot="content" title="年龄性别对比分析" style="height: 21%">
            <StackBar slot="content" :data="seriesData" />
          </SubContentBox>
          <SubContentBox v-if="grade==4&&gradeType=='grade'" slot="content" title="职业收入对比分析" style="height: 20%">
            <EchartsMoreLineAlter splitNumber="3" yUnit="元" :data="careerComparison" slot="content" :color="[
          'rgba(217, 117, 89,',
          'rgba(228, 196, 119,',
          'rgba(2, 246, 247,',
          'rgba(48, 137, 233,',
        ]" gridRight="16%" gridTop="18"></EchartsMoreLineAlter>
          </SubContentBox>
          <SubContentBox v-if="grade==5&&gradeType=='grade'" slot="content" title="服务设施可用性监控" style="height: 16%">
            <div class="service-monitoring" slot="content">
              <div v-for="(item,index) in serviceMonitoring2" :key="index" class="flex_center_direction2">
                <EchartsPercentage barWidth="10" :itemStyleColor="item.color" :label="item.value+item.unit" unit="%"
                  class="service-monitoring-echarts" :data="item.rate">
                </EchartsPercentage>
                <span style="color:#ffffff">{{item.name}}</span>
              </div>
            </div>
          </SubContentBox>
          <SubContentBox v-if="grade==5&&gradeType=='grade'" slot="content" title="居民生活监控" style="height: 21%">
            <div style="width: 100%;height: 100%;display: flex;" slot="content">
              <EchartsMoreLineAlter splitNumber="3" :extraLegend="{right:'center',top:0,orient:'horizontal'}"
                style="width: 70%;" :data="residentLife" :color="[
          'rgba(217, 117, 89,',
          'rgba(228, 196, 119,',
          'rgba(2, 246, 247,',
          'rgba(48, 137, 233,',
        ]" gridRight="3%" areaStyleOpcity="0"></EchartsMoreLineAlter>
              <div class="gauge" style="height: 100%;width: 30%;margin-top: -25px;">
                <EchartsGauge v-for="(item,index) in residentLife2" :data="item" :key="index"
                  style="width: 48%;height:100px;margin-bottom:2px;display: inline-block;"></EchartsGauge>
              </div>
            </div>

          </SubContentBox>
          <SubContentBox v-if="grade==5&&gradeType=='grade'" slot="content" title="生活垃圾" style="height: 21%">
            <EchartsBarLine slot="content" :data="shljData"></EchartsBarLine>
          </SubContentBox>
          <!-- <SubContentBox v-if="grade==5&&gradeType=='grade'" slot="content" title="年龄性别对比分析" style="height: 14%">
            <StackBar slot="content" :data="seriesData" />
          </SubContentBox> -->
          <SubContentBox v-if="grade==5&&gradeType=='grade'" slot="content" title="职业收入对比分析" style="height: 21%">
            <EchartsMoreLineAlter splitNumber="3" yUnit="元" :data="careerComparison" slot="content" :color="[
          'rgba(217, 117, 89,',
          'rgba(228, 196, 119,',
          'rgba(2, 246, 247,',
          'rgba(48, 137, 233,',
        ]" gridRight="16%" gridTop="18"></EchartsMoreLineAlter>
          </SubContentBox>
          <SubContentBox v-if="grade==5&&gradeType=='grade'" slot="content" title="重点人群" style="height: 21%">
            <EchartsMoreLineAlter splitNumber="2" yUnit="人" :data="keyGroups" slot="content" areaStyleOpcity="0.15"
              :color="[
          'rgba(217, 117, 89,',
          'rgba(228, 196, 119,',
          'rgba(2, 246, 247,',
          'rgba(48, 137, 233,',
        ]" gridRight="3%" gridTop="30" :extraLegend="{  width:'100%',right:'center',top:0,orient:'horizontal'}">
            </EchartsMoreLineAlter>
          </SubContentBox>
          <Screen v-if="gradeType=='select'" slot="content"></Screen>
        </ItemBox>
      </div>
    </transition>
    <div class="center">
      <Statistics></Statistics>
    </div>
    <transition name="right" appear>
      <div class="right">
        <ItemBox title="社区设施分析" v-if="grade==1||grade==2||grade==3||grade==4" style="height: 32.2%" class="right-top"
          :backgroundImage="require('@/assets/images/licang/kuang/k4.png')">
          <TabLine slot="content" ref="TabLine" :data="communityFacilities" :grade="grade"></TabLine>
        </ItemBox>
        <ItemBox title="楼栋运营分析" v-if="grade==5" style="height: 32.2%" class="right-top"
          :backgroundImage="require('@/assets/images/licang/kuang/k4.png')">
          <BuildingOperations slot="content" ref="BuildingOperations"></BuildingOperations>
        </ItemBox>
        <ItemBox title="社区事件上报" style="height: 66%" class="right-bottom"
          :backgroundImage="require('@/assets/images/licang/kuang/k7.png')">
          <span class="date" slot="select">已完成事件统计</span>
          <div slot="content" class="right-bottom1">
            <InfoList slot="content" @dispose="dispose"></InfoList>
          </div>
        </ItemBox>
      </div>
    </transition>
    <!-- 处置弹窗 -->
    <Pop ref="Pop" :type="popInfo.type" :info="popInfo.info"></Pop>
  </div>
</template>

<script>
  import Screen from './screen'
  import TabLine from '@/components/echarts/line/tab-line'
  import StackBar from "@/components/echarts/bar/stackBar";
  import HBar from "@/components/echarts/bar/horizontalBar";
  import Statistics from "@/components/image-text/statistics";
  import BuildingOperations from "@/components/TradeDetail/buildingOperations";
  import { mapGetters } from 'vuex';
  let gradeList = [{ name: '青岛市李沧区汇总', value: '1' }, { name: '浮山路街道', value: '2' }, { name: '福岛路社区', value: '3' }, { name: '福岛社区', value: '4' }, { name: '9号楼', value: '5' },]
  export default {
    name: "Community",
    components: {
      StackBar,
      HBar,
      TabLine,
      BuildingOperations,
      Statistics,
      Screen
    },
    computed: {
      ...mapGetters([
        'isMapReady',
        'map'
      ]),
      title() {
        return this.gradeList.map(item => item.name).join('-')
      }
    },
    watch: {
      isMapReady(val) {
        if (val) {
          this.setMap()
        }
      }
    },
    data() {
      return {
        gradeList: [{ name: '青岛市李沧区汇总', value: '1' }],
        date: null,
        gradeType: 'grade',//筛选还是等级 grade/select
        // title: JSON.parse(JSON.stringify(gradeList)),
        grade: 1,//等级
        leftTop1: [
          {
            title: '文化程度',
            data: [
              { name: '初中', value: 11 },
              { name: '中专', value: 15 },
              { name: '大专', value: 12 },
              { name: '本科', value: 9 },
              { name: '博士', value: 3 },
              { name: '研究生', value: 2 },
              { name: '其他', value: 1 },
            ]
          },
          {
            title: '家庭人数',
            data: [
              { name: '1人', value: 12 },
              { name: '2人', value: 52 },
              { name: '3人', value: 9 },
              { name: '4人', value: 30 },
              { name: '5人', value: 44 },
              { name: '6人', value: 92 },
            ]
          },
          {
            title: '车辆',
            data: [
              { name: '机动车', value: 16000 },
              { name: '非机动车', value: 6000 }
            ]
          },
          {
            title: '社区执勤',
            data: [
              { name: '商超', value: 12 },
              { name: '网格员', value: 52 },
              { name: '街道办人员', value: 9 },
              { name: '巡查员', value: 51 },
            ]
          },
        ],
        seriesData: [
          {
            name: '男',
            data: [1.2, 1.6, 2.1, 3.1, 4.2, 8.1, 8.9]
          },
          {
            name: '女',
            data: [1.4, 2.1, 3.1, 4.1, 5.1, 7.1, 9.9]
          },
        ],
        shljData: {
          xData: [1, 2, 3, 4, 5, 6, 7],
          yData: [
            { name: "垃圾量", data: [300, 233, 322, 342, 245, 335, 452] },
            { name: "清运量", data: [235, 332, 225, 245, 342, 231, 542] },
          ],
        },
        residents: [
          { value: "112600", name: "重点人口", rate: "21%" },
          { value: "256136", name: "已婚人数", rate: "34%" },
        ],
        occupationIncome: {
          xData: ["IT技术", "金融", "演艺", "公务", 'c餐饮'],
          yData: [
            { name: "1000-5000", data: [1000, 2000, 3000, 3300, 1000] },
            { name: "5000-9000", data: [10000, 12000, 16000, 19000, 34000] },
            { name: "9000-15000", data: [3000, 2800, 2400, 2000, 3000] },
            { name: "15000以上", data: [1400, 1200, 500, 200, 3333] },
          ],
        },
        serviceMonitoring: [
          {
            name: '小区绿化',
            rate: 63,
            value: 1800,
            unit: 'm²',
            color: "#3DE65C"
          },
          {
            name: '健身设施',
            rate: 88,
            value: 120,
            unit: '个',
            color: "#0099FF"
          },
          {
            name: '垃圾桶',
            value: 86,
            rate: 68,
            unit: '个',
            color: "#FFC344"
          },
          {
            name: '摄像头',
            value: 167,
            rate: 70,
            unit: '个',
            color: "#01FBF6"
          },
        ],
        serviceMonitoring2: [
          {
            name: '电梯',
            rate: 63,
            value: 3,
            unit: '个',
            color: "#3DE65C"
          },
          {
            name: '消防楼梯',
            rate: 88,
            value: 2,
            unit: '个',
            color: "#0099FF"
          },
          {
            name: '垃圾桶',
            value: 34,
            rate: 68,
            unit: '个',
            color: "#FFC344"
          },
          {
            name: '摄像头',
            value: 55,
            rate: 70,
            unit: '个',
            color: "#01FBF6"
          },
        ],
        origin: {
          xData: ["山东", "河北", "内蒙", "辽宁", '河北'],
          yData: [
            { name: "籍贯", data: [1000, 2000, 3000, 3300, 3003] },
            { name: "本地居住", data: [10000, 12000, 16000, 19000, 13054] },
            { name: "外出务工", data: [3000, 2800, 2400, 2000, 5322] },
            { name: "旅居人口", data: [1400, 1200, 500, 200, 3345] },
          ],
        },
        //居民生活
        residentLife: {
          xData: ["1", "2", "3", "4", 5, 6, 7],
          yData: [
            { name: "电", data: [134, 432, 234, 321, 543, 674, 456] },
            { name: "网络", data: [124, 546, 632, 135, 345, 652, 354] },
            { name: "水", data: [542, 115, 432, 247, 533, 335, 653] },
            { name: "气", data: [442, 225, 652, 225, 543, 234, 563] },
          ],
        },
        //居民生活2仪表盘
        residentLife2: [
          { name: '水压', value: 52 },
          { name: '电压', value: 58 },
          { name: '煤气压力', value: 38 },
          { name: '网络宽带', value: 51 },
        ],
        //社区流量
        communityTraffic: {
          xData: ["1", "2", "3", "4", "5", "6", '7'],
          yData: [
            { name: "人流", data: [345, 454, 234, 543, 643, 123, 742] },
            { name: "车流", data: [532, 246, 135, 645, 752, 245, 543] },
            { name: "执勤人员", data: [325, 123, 255, 534, 233, 543, 354] },
          ],
        },
        //职业对比
        careerComparison: {
          xData: ["IT技术", "自雇", "演艺", "餐饮", '服务', '公务'],
          yData: [
            { name: "1000-5000", data: [] },
            { name: "5000-9000", data: [] },
            { name: "9000-15000", data: [] },
            { name: "15000以上", data: [] },
          ],
        },
        //重点人群分布
        keyGroups: {
          xData: ["12-2", "5-3", "6-1", "8-3", '4-3', '9-1'],
          yData: [
            { name: "独居老人", data: [] },
            { name: "残疾人", data: [] },
            { name: "社戒杜康", data: [] },
            { name: "重症重精", data: [] },
            { name: "犯罪前科", data: [] },
            { name: "涉恶人员", data: [] },
          ],
        },

        HBarData: [
          { value: 112, name: "健身房" },
          { value: 99, name: "运动馆" },
          { value: 220, name: "兴趣班" },
          { value: 10, name: "学校" },
          { value: 10, name: "地铁" },
          { value: 100, name: "公交站" }
        ],
        facilities: [
          { value: "112", name: "停车场", rate: "21%" },
          { value: "998", name: "充电桩", rate: "34%" },
          { value: "220", name: "商超", rate: "21%" },
          { value: "10", name: "医院", rate: "34%" },
          { value: "10", name: "公园", rate: "21%" },
          { value: "100", name: "养老机构", rate: "34%" },
          // { value: '20', name: '社区食堂', rate: '21%' },
          // { value: '30', name: '托儿所', rate: '34%' },
        ],
        devices: [
          { value: "112", name: "摄像头", rate: "21%" },
          { value: "998", name: "路灯", rate: "34%" },
          { value: "220", name: "垃圾桶", rate: "21%" },
          { value: "10", name: "指示牌", rate: "34%" },
        ],
        activeName: "first",
        // communityFacilities: {
        //   xData: ["停车场", "充电桩", "商超", "医院"],
        //   yData: [
        //     { name: "总数", data: [10, 20, 10, 2] },
        //     { name: "已用", data: [9, 12, 9, 2] },
        //   ],
        // },
        communityFacilities: [
          {
            value: 'a',
            name: "通用配套",
          },
          {
            value: 'b',
            name: "老人配套",
          },
          {
            value: 'c',
            name: "育儿配套",
          },
          {
            value: 'd',
            name: "职业配套",
          }
        ],
        popInfo: {},
        builds:9,//楼栋

      };
    },
    created() {
      this.getDate();
    },
    mounted() {
      if (this.isMapReady) {
        this.setMap()
      }
      this.initData()
      window.addEventListener('onAreaClick', e => {
        if (e.detail.level === 'street') {
          this.$store.dispatch('setMapLevel', 2)
          this.grade = 2
          this.gradeList = [
            { name: '李沧区', value: 1 },
            { name: '浮山路街道', value: 2 }
          ]
        }
        if (e.detail.level === 'communities') {
          this.$store.dispatch('setMapLevel', 3)
          this.grade = 3
          this.gradeList = [
            { name: '李沧区', value: 1 },
            { name: '浮山路街道', value: 2 },
            { name: '福岛路社区', value: 3 }
          ]
        }
        if (e.detail.level === 'community') {
          this.$store.dispatch('setMapLevel', 4)
          this.grade = 4
          this.gradeList = [
            { name: '李沧区', value: 1 },
            { name: '浮山路街道', value: 2 },
            { name: '福岛路社区', value: 3 },
            { name: '福岛小区', value: 4 }
          ]
        }
        if (e.detail.level === 'place') {
          this.$store.dispatch('drawBuilding', e.detail)
          this.grade = 5
          this.gradeList = [
            { name: '李沧区', value: 1 },
            { name: '浮山路街道', value: 2 },
            { name: '福岛路社区', value: 3 },
            { name: '福岛小区', value: 4 },
            { name: e.detail.name.replace('福岛小区', ''), value: 5 }
          ]
          this.builds=e.detail.name.replace('福岛小区', '')
          this.builds=this.builds.replace('号楼', '')
        }
        // console.log(e.detail, this.gradeList)
        this.initData()

      })
    },
    beforeDestroy() {
      if (this.map) {
        this.map.clearMap()
        this.$store.dispatch('resetCenterAndZoom')
      }

    },
    methods: {
      //等级点击
      gradeClick(e) {
        this.gradeType = 'grade'
        if (typeof e != 'string') {
          if (e.value == 1) {
            this.grade = 1
            this.gradeList = [{ name: '青岛市李沧区汇总', value: '1' }]
            this.$store.dispatch('drawAllStreetZone')

            this.$store.dispatch('resetCenterAndZoom')
          } else if (e.value == 2) {
            this.gradeList = [
              { name: '李沧区', value: 1 },
              { name: '浮山路社区', value: 2 }
            ]
            this.$store.dispatch('setMapLevel', 2)
            this.grade = 2
          } else if (e.value == 3) {
            this.grade = 3
            this.gradeList = [
              { name: '李沧区', value: 1 },
              { name: '浮山路社区', value: 2 },
              { name: '福岛路社区', value: 3 },
            ]
            this.$store.dispatch('setMapLevel', 3)
          } else if (e.value == 4) {
            this.grade = 4
            this.gradeList = [
              { name: '李沧区', value: 1 },
              { name: '浮山路社区', value: 2 },
              { name: '福岛路社区', value: 3 },
              { name: '福岛小区', value: 4 },
            ]
            this.$store.dispatch('setMapLevel', 4)
          }
        }

      },
      //获取当前日期
      getDate() {
        this.date = this.$moment().format("YYYY-MM-DD");
      },
      setMap() {
        this.$store.dispatch('drawAllStreetZone')
      },
      //生成随机数据
      initData() {
        for (let i in this.careerComparison.yData) {
          this.careerComparison.yData[i].data = []
          for (let j = 0; j < 6; j++) {
            this.careerComparison.yData[i].data.push(this.$randomNum(5000, 15000))
          }
        }
        for (let i in this.keyGroups.yData) {
          this.keyGroups.yData[i].data = []
          this.keyGroups.xData=[]
          for (let j = 0; j < 6; j++) {
            try {
              this.keyGroups.xData.push(this.builds+'-'+this.$randomNum(1, 4)+'0'+this.$randomNum(1, 9))
            } catch (error) {
              
            }
            this.keyGroups.yData[i].data.push(this.$randomNum(1, 3))

          }
        }
        //居民分析
        for (let items of this.leftTop1) {
          for (let item of items.data) {
            item.value = Number((Math.round(Math.random() * 200)).toFixed(0))
          }
        }
        //职业收入分析
        for (let i in this.occupationIncome.yData) {
          for (let j in this.occupationIncome.yData[i].data) {
            this.$set(this.occupationIncome.yData[i].data, j, this.$randomNum(1500, 22000))
          }
        }
        //籍贯分析
        for (let i in this.origin.yData) {
          for (let j in this.origin.yData[i].data) {
            this.$set(this.origin.yData[i].data, j, this.$randomNum(1500, 40000))
          }
        }
        //职业收入分析
        for (let i in this.HBarData) {
          this.$set(this.HBarData[0], 'value', this.$randomNum(3, 30))
        }
        //男女比例
        for (let i in this.seriesData) {
          for (let j in this.seriesData[i].data) {
            this.$set(this.seriesData[i].data, j, this.$randomNum(1, 10))
          }
        }
        this.$set(this.communityTraffic, 'xData', this.$getRecent7Hours())
        this.$set(this.residentLife, 'xData', this.$getRecent7Hours())
        this.$set(this.shljData, 'xData', this.$getRecent7Hours())

      },
      dispose(e) {
        this.popInfo = {
          type: '交通疏导指令',
          info: e.dispatch.replace('下发到：', '')
        }
        this.$refs.Pop.open = true
      },
    },
  };
</script>

<style lang="scss" scoped>
  .community {
    width: 100%;
    height: 100%;
    overflow: hidden;
    align-items: start;

    .left,
    .right {
      pointer-events: fill;
      width: 24.5%;
      height: 100%;

      .date {
        font-size: 22px;
        margin-right: 20px;
        color: rgba(255, 255, 255, 0.8);
      }

      /* background-color: red; */
    }

    .center {
      flex: 1;
    }

    .left {
      .left-top {
        .left-top1 {
          .pie-echarts {
            width: 25%;
            height: 110px;
          }
        }

        .left-top2 {
          margin-top: 5px;
        }
      }

      .left-bottom {
        .left-bottom1 {
          .pie-echarts {
            width: 33%;
            height: 170px;
          }
        }

        .left-bottom2 {
          margin-top: 5px;

          .left-bottom2-item {
            width: 100%;
            display: flex;
            align-items: center;

            .margin-right {
              margin-right: 15px;
            }

            .margin-left {
              margin-left: 25px;
            }
          }
        }
      }

      .left-top2-item {
        display: flex;
        align-items: center;
        width: 50%;
        margin-top: 9px;

        .margin-right {
          margin-right: 20px;
        }
      }
    }

    .right {
      .right-top {
        .right-top1 {
          .flex {
            height: 100%;
            width: 100%;

            .item {
              width: 20%;
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              align-items: center;

              .pie-echarts {
                width: 100%;
                height: 140px;
              }

              .title {
                font-size: 20px;
                color: #ffffff;
                font-family: PingFang SC-Bold;
              }

              .desc {
                font-size: 19px;
                color: #ffffff;
                font-family: PingFang SC-Bold;
                padding: 0px 20px 0;
                text-align: center;
              }
            }
          }
        }

        .right-top2 {
          .flex {
            height: 100%;
            width: 100%;

            .left,
            .right {
              width: 50%;
              height: 100%;
            }

            .left {
              display: flex;
              flex-direction: column;
              justify-content: center;

              .item {
                margin-top: 10px;
                display: flex;
                align-items: center;

                .margin-right {
                  margin-right: 10px;
                }
              }
            }
          }
        }
      }

      .right-bottom {
        .right-bottom1 {
          width: 90%;
          margin: 0px auto;
          height: 100%;
        }
      }
    }

    .lWrap {
      width: 100%;
      padding-right: 40px;
      padding-top: 10px;
    }

    h4 {
      font-size: 20px;
      font-weight: bold;
      color: #fff;
      margin: 0;
      padding: 0;
    }


    .service-monitoring {
      height: 100%;
      width: 100%;

      display: flex;
      justify-content: space-between;

      .service-monitoring-echarts {
        width: 150px;
        float: left;
        height: 150px;
        margin-bottom: 5px;
      }

    }
  }
</style>
<style lang="scss">
  .community {
    .el-tabs__item {
      padding: 0 20px !important;
      color: #fff;
      font-weight: bold;
      font-size: 16px !important;
    }

    .el-tabs__item.is-active {
      color: #00cdf9;
    }
  }
</style>